<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>评价卖主</title>
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/css/sm.min.css">
    <link rel="stylesheet" href="/static/css/sm-extend.min.css">

    <!--icon css-->
    <link rel="stylesheet" href="/static/css/icon-style.css">

    <style>
        .tc{
            width: 100%;
            height: 2rem;
        }
        .commodityStatus{
            border: solid .2rem #dddddd;
            color: #dddddd;font-weight: 800;
            transform:rotate(-8deg);
            -ms-transform:rotate(-8deg); 	/* IE 9 */
            -moz-transform:rotate(-8deg); 	/* Firefox */
            -webkit-transform:rotate(-8deg); /* Safari 和 Chrome */
            -o-transform:rotate(-8deg); 	/* Opera */
        }

        ul, li, ol { list-style: none; }

        /* 重置文本格式元素 */
        a {
            text-decoration: none;
            cursor: pointer;
            color:#333333;
            font-size:14px;
        }
        a:hover {
            text-decoration: none;
        }
        .clearfix::after{
            display:block;
            content:'';
            height:0;
            overflow:hidden;
            clear:both;
        }

        .block{
            width:100%;
            padding: .5rem;
            line-height:21px;
        }
        .block .star_score{
            float:left;
        }
        .star_list{
            height:21px;
            margin:50px;
            line-height:21px;
        }
        .block p,.block .attitude{
            padding-left:20px;
            line-height:21px;
            display:inline-block;
        }
        .block p{
            margin: 0 0 0.5rem 0;
        }
        .block p span{
            color:rgb(247, 127, 11);
            font-size:16px;
            font-family:Georgia, "Times New Roman", Times, serif;
        }

        .star_score {
            background:url(/static/img/stark2.png);
            width:160px;
            height:21px;
            position:relative;
        }

        .star_score a{
            height:21px;
            display:block;
            text-indent:-999em;
            position:absolute;
            left:0;
        }

        .star_score a:hover{
            background:url(/static/img/stars2.png);
            left:0;
        }

        .star_score a.clibg{
            background:url(/static/img/stars2.png);
            left:0;
        }

        #starttwo .star_score {
            background:url(/static/img/starky.png);
        }

        #starttwo .star_score a:hover{
            background:url(/static/img/starsy.png);
            left:0;
        }

        #starttwo .star_score a.clibg{
            background:url(/static/img/starsy.png);
            left:0;
        }

        /*星星样式*/

        .show_number{
            padding-left:50px;
            padding-top:20px;
        }

        .show_number li{
            width:240px;
            border:1px solid #ccc;
            padding:10px;
            margin-right:5px;
            margin-bottom:20px;
        }

        .atar_Show{
            background:url(/static/img/stark2.png);
            width:160px; height:21px;
            position:relative;
            float:left;
        }

        .atar_Show p{
            background:url(/static/img/stars2.png);
            left:0;
            height:21px;
            width:134px;
        }

        .show_number li span{
            display:inline-block;
            line-height:21px;
        }
        .item-input{
            width: 100%;
            padding: .5rem;
        }
        .item-input textarea{
            width: 100%;
            padding: .5rem;
            height: 8rem;
            border-radius: .5rem;
            background: #ffffff;
        }
    </style>
</head>

<body>
<!--头部-->
<header class="bar bar-nav">
    <a class="icon icon-left pull-left" href="JavaScript:history.go(-1)"></a>
    <h1 class="title">评价</h1>
</header>
<!-- 内容区-->
<div class="content">
    <div class="card">

    </div>

    <div id="startone"  class="block clearfix" >
        <div class="star_score"></div>
        <p style="float:left;">您的评分：<span class="fenshu"></span> 分</p>
        <div class="attitude"></div>
    </div>

    <div class="item-input">
        <textarea name="content" maxlength="400" placeholder="请输入评论内容"></textarea>
    </div>
    <div class="submit">
        <a href="javascript:void(0)" onclick="submitComment()"  class="button button-big button-fill">评论 </a>
    </div>
</div>

<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="/static/js/deatilPage.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/starScore.js" charset="utf-8"></script>
<script>
    var  goodId ;
    $(document).ready(function () {
//			图片
        var url = location.search; //获取url中"?"符后的字串
        var strs = url.split("=");
        var id = strs[1];
        goodId = id;
        //商品详情异步函数
        $.ajax({
            url: '/sys/good/detail',
            type: 'get',
            data: {goodId: id},
            success: function (re) {
                if (!re.status) {
                    var goodDetail = re.data.GoodDetail.data;
                    var sellerDetail = re.data.sellerCon.data;
                    //分割图片
                    var strs = new Array();
                    strs = goodDetail.goodImg.split(',');
                    var result ="<div class=\"card-header\">"+goodDetail.name+"</div>\n" +
                        "<div class=\"card-content\">\n" +
                        "		<div class=\"list-block media-list\" onclick='goodDetailPage("+goodDetail.goodId+")'>\n" +
                        "				<ul>\n" +
                        "						<li class=\"item-content\">\n" +
                        "								<div class=\"item-media\">\n" +
                        "										<img src='"+strs[0]+"' width=\"44\">\n" +
                        "								</div>\n" +
                        "								<div class=\"item-inner\">\n" +
                        "										<div class=\"item-title-row\">\n" +
                        "												<div class=\"item-title\">"+sellerDetail.username+"</div>\n" +
                        "												<div class=\"\" style=\"font-size: 1rem;color: red;font-weight: 600;\">"+goodDetail.price+"元</div>\n" +
                        "										</div>\n" +
                        "										<div class=\"item-subtitle\">"+goodDetail.detail+"</div>\n" +
                        "								</div>\n" +
                        "						</li>\n" +
                        "				</ul>\n" +
                        "		</div>\n" +
                        "</div>\n" +
                        "<div class=\"card-footer\">\n" +
                        "		<span>"+goodDetail.createTime+"</span>\n" +
                        "</div>";
                    $('.card').append(result);
                } else {
                    $.toast(re.msg);
                }
            }
        });


    });
    function submitComment(){
        var content = $("textarea[name='content']").val();
        var score = $('.fenshu').html();
        if(score ==  ''||score ==  null){
            $.toast('请给卖家打分');
            return false
        }
        if(content.length < 8){
            $.toast('请输入八字以上评论');
            return false
        }
        //提交评论
        $.ajax({
            url: '/front/comment/create',
            type: 'post',
            data: {goodId: goodId},
            success: function (re) {
                if (!re.status) {
                    $.toast(re.msg);
                    setTimeout(function () {
                        window.location.href='myBuyUI';
                    },1500)
                } else {
                    $.toast(re.msg);
                }
            }
        });

    }
</script>
</body>

</html>